<template>
    <div>
        <nav>
            <ul class="pagination">
                <li @click="prevChange">
                <a  aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
                </li>
                <li :class="[num==pageconfige.currentPage ? 'active':'']" v-for="num in totalPage" :key="num" @click="pageNumClick(num)"><a href="#">{{num}}</a></li>
                <li @click="nextChange">
                <a aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                pageNum:''
            }
        },
        props:['totalPage','pageconfige'],
        methods:{
            pageNumClick(num){
                this.pageNum=num
                this.$emit('pageChange',num)
             },
             prevChange(){
                 this.pageNum = this.pageconfige.currentPage <=1 ? 1 :  this.pageconfige.currentPage-1
                  this.$emit('pageChange',this.pageNum)
             },
             nextChange(){
                  this.pageNum = this.pageconfige.currentPage >= this.totalPage ? this.totalPage : this.pageconfige.currentPage+1
                 this.$emit('pageChange',this.pageNum)
             }
    }
    }
</script>

<style scoped>
.pagination {
    float: right;
}
</style>